<template>
	<wsPage title="地区管理">
		<div slot="page_operate">
			<Button type="ghost"><Icon type="refresh"></Icon><span>刷新</span></Button>
		</div>
		
		<wsSmPanel>
			<div slot="list_operate">
				<!-- <Button type="ghost" v-if="!isPLevel" @click="preList">上一层</Button> -->
				<Button type="ghost" @click="showAddModal">新增区域</Button>
			</div>
			<div slot="list_data">
				<div class="title-row">
					<span style="">当前路径:</span>
					<span v-for="(item, index) in pre.paths">
						<span v-if="index > 0" style="padding: 0 3px;">></span><a @click="listParent(item, index)" v-text="item.name"></a>
					</span>
				</div>

			<div align="left" v-if="languageshow">
				<Form ref="form1" :model="form.model" :label-width="100" label-position="left">
							<FormItem label="语言" prop="languageCode" required>
								<Select v-model="modal.form.languageCode" transfer=true>
									<Option v-for="item in languageList" :value="item.languageCode" :key="item.languageCode">{{ item.motherTongue }}</Option>
								</Select>
							</FormItem>
				</Form>
				<a @click="nextlevel()" align="left"> 进入首页</a>
			</div>

				<Table :columns="table.columns" :data="table.datas" v-if="homeshow"></Table>
			</div>
		</wsSmPanel>

		<wsModal v-model="modal.show" ok-text="保存" title="新增区域" @on-ok="saveModal" @on-cancel="cancelModal" v-if="addshow">
		    <Form ref="from2" :model="modal.form" :rules="modal.validate" :label-width="100">
		        <FormItem label="名称" prop="name">
		            <Input v-model="modal.form.name" autofocus></Input>
		        </FormItem>
		        <!-- <FormItem label="级别" prop="level">
		            <Input v-model="modal.form.level" autofocus></Input>
		        </FormItem> -->
				<FormItem label="全名" prop="fullName">
		            <Input v-model="modal.form.fullName" autofocus></Input>
		        </FormItem>
				<FormItem label="区域编码" prop="code">
		            <Input v-model="modal.form.code" autofocus></Input>
		        </FormItem>
				<FormItem label="父级名称" prop="parentName">
		            {{parentName}}
		        </FormItem>
				<!-- <FormItem label="父级id" prop="parentId">
		           	{{parentId}}
		        </FormItem> -->
		    </Form>			
		</wsModal>		 
	</wsPage>
</template>

<script>
	import Util from '../../../common/util.js';
	export default {
		data() {
			return {
				languageshow:true,
				homeshow:false,
				addshow:false,
			    languageList: [],
				parentId:-2,
				table: {
					columns: [
					{
						title: '名称',
						key: 'name',
						render: (h, params) => {
							return h('a', {
								on: {
									click: () => {
										let row = params.row;
										this.listChilds(row);
									}
								},
							}, params.row.name);
						}
					},{
                        title: '级别',
                        key: 'level',
                        width: 200,
                        align: 'center',
                        render: (h, params) => {
                        	return h('span', {        		
                        	}, this.levelFilter(params.row.level))
                        }
                    },
					{
						title: '创建时间',
						key: 'createDate'
					},
             
					],
					datas: []
				},
				form: {
					curParentId: '-1', //当前的父节点
					paths: [] //显示层级路径
				},
				modal: {
					show: false,
					form: {
						name:'',
						level: '',
						fullName: '',
						code: '',
						parentName: '',		
                        parentId: '',
						languageCode: ''
					},
					validate: {
						name: [
	                        { required: true, message: '区域名称不能为空', trigger: 'blur' }
	                    ],
	                    level: [
	                        { required: true, message: '区域级别不能为空', trigger: 'blur' }
	                    ],
	                    fullName: [
	                        { required: true, message: '区域全名不能为空', trigger: 'blur' }
						],
						code: [
	                        { required: true, message: '区域编码不能为空', trigger: 'blur' }
	                    ],
						languageCode: [
	                        { required: true, message: '语言不能为空', trigger: 'blur' }
	                    ],
					},
					rules: {
						languageCode: [{
							required: true,
							message: "语言不能为空"
						}],
					},
				},
				pre: {
					paths: [] //定义上级路径
				}				
 			}
		},
		computed: {
			/**
			 * 是否为顶级
			 */
			isPLevel() {
				return '-2' === this.form.curParentId;
			},		
		},
		mounted() {
			this.pre.paths.push({
				id: -2,
				name: '请选择语言'
			});


			
			 this.init();
		},
		methods: {
			levelFilter(value){
			switch(value)
				{
				case 1:
					value = '国家';
					break;
				case 2:
					value = '市';
					break;

				case 3:
					value = '区县';
					break;

				case 4:
					value = '街道';
					break;
				default:
					value = ''	
				}
				return value;
			},
			/**
			 * 初始化
			 */
			init() {
				this.initCurrency();
			},
			//进入首页
			nextlevel() {
				if(this.modal.form.languageCode == "") {
							this.$Message.info("请选择语言");
							return;
				}

				//隐藏语言选择，显示首页，同时查询区域
				this.languageshow=false;
				this.homeshow=true;
				this.addshow=true;
				let languageCode = this.modal.form.languageCode;
			    this.pre.paths.push({
					id: -1,
					name: '首页'
				});

				this.form.curParentId = -1;
				this.area();
				
			},
			area() {
				const _this = this;
				this.parentId =this.form.curParentId;
				this.parentName = this.form.parentName;

				let parentId_ = this.form.curParentId;
				this.axios.get('/ws/ops/areas/parent/' + parentId_).then(function(response) {
					let res = response.data;
					if(0 === res.meta.code) {
						_this.table.datas = res.data;
					} else {
						_this.$Message.warning('查询失败');
					}
				});
			},
			initCurrency() {
				let _this = this;
				this.axios.get("/ws/ms/languages").then(response => {
					var res = response.data;
					var resMeta = res.meta;
					if(0 == resMeta.code) {
						this.languageList = res.data;
					} else {
						_this.$Message.warning(resMeta.message);
					}
				});
			},
			/**
			 * 查看子节点
			 */
			listChilds(row) {
				this.pre.paths.push({
					id: row.id,
					name: row.name
				});
				let rowId_ = row.id;
				let rowName_ = row.name;
				let curParentId_ = this.form.curParentId;
				this.form.paths.push(curParentId_);
				this.form.curParentId = rowId_;
				this.form.parentName = rowName_;
				this.area();
			},
			listParent(item_, index_) {
				
				//如果已经是最后了，就不用显示
				let parentLength = this.pre.paths.length;
				if(index_ == 5) {
					return;
				}

				//如果是语言选择 TODO
				if(index_ == 0) {
					this.languageshow=true;
				    this.homeshow=false;
				    this.addshow=false;
				}
				//从数组中截掉
				this.form.curParentId = item_.id;
				this.pre.paths.splice(index_ + 1, parentLength - index_ - 1);

				this.area();
			},
			/**
			 * 上一层
			 */
			// preList() {
			// 	//删除数组最后一个并返回删除的元素
			// 	let preParentId_ = this.form.paths.pop();
			// 	this.form.curParentId = preParentId_;
			// 	this.init();
			// },
			/**                          
			 * 打开新增模态框
			 */
			showAddModal(){
				this.modal.show = true;
				// this.expressModal.form.id = '';
				// this.expressModal.form.name = '';
				// this.expressModal.form.code = '';
				// this.expressModal.form.url = '';
				// this.expressModal.show = true;
			},
			/**
			 * 新增弹框确认操作
			 */
			saveModal() {
				this.$refs['from2'].validate((valid) => {
					if (valid) {
						this.save();
						this.modal.show = false;
                    } else {
                        this.$Message.error('表单验证失败!');
                    }
                    
               });
			},
			/**
			 * 新增的弹框取消操作
			 */
			cancelModal() {
				this.$refs['from2'].resetFields();
				this.modal.show = false;
			},
			/**
			 * 新增
			 */
			save(){
				const _this = this;
				this.modal.form.parentId = this.parentId;
				let postData_ = this.modal.form;
				this.axios.post('/ws/ops/areas/addArea', postData_).then(function(response) {
					let res = response.data.parentId;
					console.log(res);
					if(0 === res.meta.code) {
						_this.$Message.success('新增成功!');
                        _this.modal.show = false;
						_this.init();
					} else {
						let message_ = res.meta.message;
						_this.$Message.warning('新增失败:' + message_);
					}
				});
			},
			

		}
	}
</script>

<style scoped>
	.title-row {
		padding: 10px;
	}
</style>